<template>
    <div class="box">
        <!-- 单车维护界面 -->
        <div>
            <div class="condition-box">
                <el-row class="title">
                    <p>{{ queryParam.parkName }}</p>
                </el-row>
                <el-row class="conditional">
                    <el-col :span="10">
                        <div class="condition-input-box">
                            <el-input placeholder="输入你想要查询的单车编号" v-model="queryParam.info" class="input-with-select">
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <p>里程数范围</p>

                        <div class="km-box">
                            <el-input class="km-input-box" v-model="queryParam.startMileage"
                                placeholder="0"></el-input><span> -
                            </span>
                            <el-input class="km-input-box" v-model="queryParam.endMileage"
                                placeholder="0"></el-input><span>KM</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="input-plateform-box">
                            <p>所属平台</p>

                            <div class="km-box">
                                <el-select v-model="queryParam.platform" clearable placeholder="请选择">
                                    <el-option v-for="item in plateformOptions" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" @click="query">
                            查询
                        </el-button>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="nav-box">
            <el-menu :default-active="actionIndex" background-color="#F2F4F6" class="el-menu-demo" mode="horizontal"
                @select="handleSelect">
                <el-menu-item index="1">良好</el-menu-item>
                <el-menu-item index="2">电量不足</el-menu-item>
                <el-menu-item index="3">损坏</el-menu-item>
            </el-menu>
        </div>
        <div class="soloview">
            <div class="list-bycicles" v-for="(item, index) in listBycs" :key="index">
                <div class="bycicle-box" v-if="actionIndex == 1 && parseFloat(item.power) > 40">
                    <data-bycicle-view :infoByc="item" @calledClosing="refresh"></data-bycicle-view>
                </div>
                <div class="bycicle-box"
                    v-if="actionIndex == 2 && parseFloat(item.power) < 40 && parseFloat(item.power) > 0">
                    <data-bycicle-view :infoByc="item" @calledClosing="refresh"></data-bycicle-view>
                </div>
                <div class="bycicle-box" v-if="actionIndex == 3 && parseFloat(item.power) == 0">
                    <data-bycicle-view :infoByc="item" @calledClosing="refresh"></data-bycicle-view>
                </div>
            </div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>


        </div>

    </div>
</template>

<script>
import LOCAL from '@/main'
import DataBycicleView from '@/components/manage/data-page/item/DataBycicleView.vue'
import API from "@/utils/request"
export default {
    mounted() {
        LOCAL.CHI = true;
        LOCAL.TITLE_INFO = '单车维护';
        LOCAL.MAIN_ACTION_INDEX = 1;
        if (this.$route.params.address)
            this.queryParam.parkName = this.$route.params.address;//接收参数
        API.findBikeByParkName(this.queryParam.parkName, ((res) => {
            this.listBycs = res;
        }));
    },
    data() {
        return {
            LOCAL,
            runawayStart: 0,
            msg: '',
            actionIndex: '1',
            platform: '',
            queryParam: {
                parkName: "",
                info: '',
                startMileage: "",
                endMileage: "",
                platform: ""
            },
            plateformOptions: [{
                value: '永安行',
                label: '永安行'
            }, {
                value: '轻悠',
                label: '轻悠'
            }],
            listBycs: []
        }
    },

    methods: {
        handleSelect(keyPath) {
            this.actionIndex = keyPath;
        },
        refresh() {
            API.findBikeByParkName(this.queryParam.parkName, ((res) => {
                this.listBycs = res;
            }));
        },
        query() {
            console.log("请求参数：")
            console.log(this.queryParam)
            API.queryBikeByDetail(this.queryParam, ((res) => {
                console.log(res);
                if (res.code === 200) {
                    this.listBycs = res.data;
                    this.$message({
                        message: '查询到[' + this.listBycs.length + ']条记录',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '网络故障，请稍后再试',
                        type: 'error'
                    })
                }
            }))
        }

    },
    components: {
        DataBycicleView
    }
}
</script>

<style scoped>
.soloview {
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    overflow: scroll;
}

.bycicle-box {
    display: flex;
    justify-items: left;
    align-self: left;
}

.box {}

.list-bycicles {
    position: relative;
    margin: 10px;
    display: inline-block;
    height: auto;
}

.nav-box {
    position: relative;
    display: block;

    margin-left: 20px;
    padding: 0;
}

.title {
    text-align: left;
    font-size: 25px;
    color: rgb(55, 55, 55);
    font-weight: bolder;
    margin-left: 20px;
    margin-right: 0;
    margin-top: 20px;
    line-height: 0px;
    padding: 0px;
    margin-bottom: 0px;
}

.input-plateform-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.km-box {
    position: relative;
    display: flex;
}

.condition-input-box {
    margin-right: 100px;
    margin-left: 20px;
}

.km-box span {
    font-size: 10px;
    width: 25px;
    text-align: center;
    line-height: 40px;
    font-weight: 100;
}

.km-box .km-input-box {
    width: 150px;
}

.condition-box {
    position: relative;
    display: block;
    width: 95%;
}

.conditional {
    display: flex;
    align-items: flex-end;
}
</style>